import React from 'react';
import {View, Dimensions} from "react-native";
import {Path, Circle, G, Text} from 'react-native-svg'
import Svg from "react-native-svg";
import GradientPath from "./GradientPath";

const lineWidth = 10;// 填充线的宽度
const startX = 75; // 中心点X坐标
const space = 14;//两点之间的间隔
const r = 70;//最外层 圆 的半径，包括 填充线
export default class ArcGradient extends React.Component {


  static navigationOptions = ({navigation}) => ({
    title: `Arc - Gradient`,
  });

  state = {
    data: [{
      color: '#DC143C',
      theta: 55 * 3.6
    }],
    count:55
  }

  createArcPath = (startX, startY, R, theta, width, color) => {
    const realR = R - width;
    const dArr = ["M" + startX, startY + width, "A" + realR, realR, 0, theta >= 180 ? 1 : 0, 1]; //顺时针
    const cx = startX;
    const cy = startY + R;//确定 中心原点

    const theta2 = theta % 360;
    theta = theta > 0 && theta2 == 0 ? 359.9 : theta2;

    const alpha = (90 - theta) / 180 * Math.PI;//顺时针
    const dx = realR * Math.cos(alpha);
    const dy = realR * Math.sin(alpha);

    const x = cx + dx;  //终点坐标
    const y = cy - dy;  //终点坐标

    dArr.push(x.toFixed(2));
    dArr.push(y.toFixed(2));
    const d = dArr.join(" ");

    const circleR = lineWidth / 2;
    const circleStartY = startY + lineWidth;

    return (
      <GradientPath
        x={x}
        y={y}
        d={d}
        color={color}
        width={width}
        startX={startX}
        circleStartY={circleStartY}
        circleR={circleR}
      />
    );
  }


  _renderData = () => {
    return this.state.data.map((item, i) => {
      const startY = i * space;
      const R = r - startY;
      const theta = item.theta;
      return this.createArcPath(startX, startY, R, theta, lineWidth, item.color);
    })
  }

  _renderText = () => {
    const fontSize = 14;
    return (
      <Text
        x={startX}
        y={r + fontSize / 2}
        fill='#000'
        fontSize={fontSize}
        textAnchor="middle"
      >{this.state.count + '%'}</Text>
    )
  }


  render() {

    return (
      <View style={{flex: 1, backgroundColor: '#fff'}}>
        <Svg width={375} height={618}>
          {this._renderData()}
          {this._renderText()}
        </Svg>
      </View>
    )
  }
}
